import React, {Component} from 'react'
import { Checkbox, Button, Input } from 'antd';
import isEmpty from 'lodash/isEmpty'
import reduce from 'lodash/reduce'
import { withRouter } from 'dva/router'
import styles from "./shoppingCar.less";
import classNames from 'classNames'

const list = JSON.parse(localStorage.getItem('shoppingCar'))

class ShoppingCar extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: list.map(item => {
        return {
          cover: item.cover,
          id: item.id,
          packaging: item.packaging,
          price: item.price,
          status: item.status,
          title: item.title,
          checked: false,
          amount: item.amount || 1
        }
      }),
      checked: false
    }
  }

  subtract(item) {
    const { list } = this.state
    const { amount } = item
    if (amount == 1) return
    item.amount -= 1
    this.setState({
      list
    })
  }

  add(item) {
    const { list } = this.state
    item.amount += 1
    this.setState({
      list
    })
  }

  checkAll(e) {
    const {list} = this.state
    let checked = e.target.checked
    list.forEach(item => {
      item.checked = checked
    })
    this.setState({
      list,
      checked
    })
  }

  check(e, item) {
    const { list } = this.state
    item.checked = e.target.checked
    this.setState({
      list
    })
  }

  toShoppingCarOrder(isDisabled) {
    const { history } = this.props
    const {list} = this.state
    if (!isDisabled) {
      const selectIndex = []
      list.forEach((item,index) => {
        if (item.checked) selectIndex.push(index)
      })
      localStorage.setItem('shoppingCar', JSON.stringify(list))
      localStorage.setItem('selectIndex', JSON.stringify(selectIndex))
      history.push('/shoppingCar/order')
    }
  }

  renderTotal() {
    const { list, checked } = this.state
    const selectProduct = list.filter(item => item.checked)
    const isDisabled = selectProduct.length ? false: true
    const totalPrice = reduce(selectProduct, (sum, next) => {
      return sum + (next['price'] * next['amount'])
    }, 0)
    return (
      <div className={styles.totalContainer}>
        <Checkbox className={styles.checkbox} onChange={e => this.checkAll.call(this, e)} checked={checked}>全选</Checkbox>
        <div className={styles.selectedGoods}>
          <span>已选商品 <span>{selectProduct.length}</span>件</span>
        </div>
        <div className={styles.expenses}>
          <span className={styles.total}>合计(不含运费)</span>
          <span className={styles.price}>¥ <span>{(totalPrice / 100).toFixed(2)}</span></span>
        </div>
        <div className={!isDisabled ? styles.payButton: classNames(styles.payButton, styles.payDisabledBtn)} onClick={this.toShoppingCarOrder.bind(this, isDisabled)}>付款</div>
      </div>
    )
  }


  render() {
    const { checked } = this.state
    const { list } = this.state
    return (
      <div className={styles.shoppingCarContainer}>
        <div className={styles.orderTitle}>购物车</div>
        {
          !isEmpty(list) &&
            <>
              <div className={styles.contentBox}>
                <div className={styles.content}>
                  <div className={styles.contentHeader}>
                    <Checkbox onChange={e => this.checkAll.call(this, e)} checked={checked}>全选</Checkbox>
                    <span className={styles.info}>商品信息</span>
                    <span className={styles.unitprice}>单价</span>
                    <span className={styles.count}>数量</span>
                    <span className={styles.price}>金额</span>
                  </div>
                  <div className={styles.contentBody}>
                    {
                      list.map((item, index) => {
                        const { cover, packaging, status, price, title, amount } = item
                        return (
                          <div className={styles.list} key={index}>
                            <div className={styles.checkbox}>
                              <Checkbox checked={item.checked} onChange={e => this.check.call(this, e, item)}></Checkbox>
                            </div>
                            <div className={styles.cover}>
                              <img src={cover}/>
                            </div>
                            <div className={styles.goodsInfo}>
                              <div className={styles.name}>
                                {title}
                              </div>
                              <div className={styles.norms}>
                                {packaging}
                              </div>
                              <div className={status == 'on' ? styles.status: classNames(styles.status, styles.short)}>
                                {status == 'on' ? '有货': '缺货' }
                              </div>
                            </div>
                            <div className={styles.price}>
                              <span>¥ </span>
                              <span>{(price / 100).toFixed(2)}</span>
                            </div>
                            <div className={styles.count}>
                              <Input addonBefore={<Button onClick={this.subtract.bind(this, item)}> - </Button>} addonAfter={<Button onClick={this.add.bind(this, item)}> + </Button>} value={item.amount} disabled={true}/>
                            </div>
                            <div className={styles.pay}>
                              <span>¥ </span>
                              <span>{((price * amount) / 100).toFixed(2)}</span>
                            </div>
                          </div>
                        )
                      })
                    }
                  </div>
                </div>
              </div>
              <div className={styles.totalContainerBox}>
                { this.renderTotal() }
              </div>
            </>
        }
      </div>
    );
  }
}

export default withRouter(ShoppingCar)